<!DOCTYPE html>
<html class='no-js' lang='zh_CN'>
<head>
<title></title>
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/application.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/uploader.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="css/toastr.min.css" />
<link rel="stylesheet" href="css/validationEngine.jquery.css" />
</head>
<body class='main page'>
	<div class='panel panel-default grid'>
		<div class='panel-heading'>
			车牌号:<input id="Plate" type="text"> 站点:<input
				id="ClientName" type="text"> 站点名称:<input id="ClientCode"
				type="text"> 起始时间:<input id="startTime" type="text"
				placeholder="精确到时分秒"> 终止时间:<input id="endTime" type="text"
				placeholder="精确到时分秒">
			<button id="queryBtn" onclick="query()">查询</button>
			<div class='panel-tools'>
				<div class='btn-group'>
					<a class='btn' onclick="query()" title='刷新'> <i
						class='fa fa-rotate-left (alias) fa-2x'></i>
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="menu-body panel panel-default grid">
		<table class="table table-hover">
			<thead stlye=text-align:center>
				<tr>
					<th>站点编号</th>
					<th>监测点</th>
					<th>拍摄时间</th>
					<th>发送时间</th>
					<th>车辆颜色</th>
					<th>车型</th>
					<th>车牌号</th>
					<th>站点</th>
					<th>车道</th>
					<th>SpotCode</th>
					<th>SpotIP</th>
					<th></th>
				</tr>
			</thead>
			<tbody id="tbodyData">
			</tbody>
		</table>
	</div>
	<script type="text/html" id="main_js">
{{if data==null || data.length==0 }}
	<div style="color: gray;text-align: center;width:100%">暂无数据</div>
{{else}}
	{{each data as value index}}
	<tr><td>{{value.SiteCode}}</td><td>{{value.MarkFlowNo}}</td><td>{{value.IdentifyTime}}</td><td>{{value.SendTime}}</td><td>{{value.PlateColor}}</td><td>{{value.PlateType}}</td><td>{{value.Plate}}</td>
		<td>{{value.ClientName}}</td><td>{{value.SpotType}}</td><td>{{value.SpotCode}}</td><td>{{value.SpotIP}}</td><td class='action'><button class="btn btn-xs btn-info" data-photo="{{value.F_PID}}" onclick="checkphoto(this)">查看图片</button></td>	
	</tr>
{{/each}}
{{/if}}
</script>
	<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="js/main.js"></script>
	<script src="js/jquery.validationEngine.min.js"></script>
	<script src="js/jquery.validationEngine-zh_CN.js"></script>
	<script src="js/toastr.min.js"></script>
	<script src="js/jquery.datetimepicker.js"></script>
	<script src="js/webuploader.min.js"></script>
	<script src="js/jquery.sha1.js"></script>
	<script src="js/template.js"></script>
	<script src="js/jquery-ui.min.js"></script>

	<script src="js/json.min.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<script src="js/core-etable.js"></script>
</body>
<script type="text/javascript">
	var url="http://58.20.6.141:10987/gsdata/rsquery/ljsb";
function jsoncallback(result) {
	var html = template('main_js', result);
	$("#tbodyData").html(html);
}	
function query() {
		var para = {};
		if ($("#Plate").val() != undefined) {
				para.plate = $("#Plate").val();
			}
			if ($("#ClientName").val() != undefined) {
				para.ClientName = $("#ClientName").val();
			}
			if ($("#ClientCode").val() != undefined) {
				para.ClientCode = $("#ClientCode").val();
			}
			if ($("#startTime").val() != undefined) {
				para.startTime = $("#startTime").val();
			}
			if ($("#endTime").val() != undefined) {
				para.endTime = $("#endTime").val();
			}
			$.ajax({
				type : 'POST',
				url : url,
				data : para,
				async : false,
				dataType : 'jsonp',
				jsonp : "jsoncallback", //服务端用于接收callback调用的function名的参数 
				success : function(result) {
				},
				error : function(data) {
					if (data == null || data.status != 200) {
						alert("与服务器连接出错了，请稍后重试，data=" + JSON.stringify(data));
					}
				}
			});
		}
function checkphoto(obj){
	var photo=$(obj).attr('data-photo')
	window.open("http://58.20.6.141:10987/gsdata/imgquery/02/"+photo+".jpg");
}
</script>